<template>
    <div class="flex flex-col items-start justify-start p-4">
        <div class="flex items-center justify-between w-full p-2 bg-gray-300">
            <div class="flex">
                <div class="mr-4">下单时间：{{ orderTime }}</div>
                <div class="mr-4">订单编号：{{ orderNo }}</div>
                <div>店铺名称：{{ storeName }}</div>
            </div>
            <div class="flex">
                <el-button
                    class="mr-4"
                    v-if="orderStatus === 1 && logisticsStatus === 3"
                    type="primary"
                    @click="handleComment"
                    >去评价</el-button
                >
                <div class="flex items-center" v-if="payStatus === 2">
                    <span>{{ resultStatus }}</span>
                    <el-dropdown @command="handleSelect" v-if="orderStatus === 1">
                        <span class="ml-4 el-dropdown-link">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="cancel" v-if="logisticsStatus < 2 && payStatus === 2"
                                    >取消订单</el-dropdown-item
                                >
                                <el-dropdown-item command="back" v-if="logisticsStatus === 3"
                                    >退货</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <el-button v-else type="primary" @click="payOrder">去付款</el-button>
            </div>
        </div>
        <div class="flex items-center flex-1 w-full mt-2">
            <div class="flex flex-col items-center mr-4" v-for="item in goods">
                <el-image style="width: 100px; height: 100px" :src="item.goodsImg" fit="cover" />
                <div class="ml-4">
                    <div class="text-lg">{{ item.goodsName }} * {{ item.goodsNum }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import { backOrder, cancelOrder } from '@/apis/order'
const props = defineProps<{
    orderId: string
    goods: any[]
    orderNo: string
    orderPrice: number
    orderStatus: number
    orderTime: number
    storeName: string
    payStatus: number
    logisticsStatus: number
}>()
const num = defineModel('num', { default: 1 })
const checked = defineModel('checked', { default: false })
const emits = defineEmits<{
    pay: [val: string]
    cancel: [val: string]
    back: [val: string]
    comment: [val: string]
}>()
// 订单状态1已下单2已取消3已退货
const orderStatusStr = computed(() => {
    switch (props.orderStatus) {
        case 1:
            return '已下单'
        case 2:
            return '已取消'
        case 3:
            return '已退货'
        default:
            break
    }
})
// 付款状态1未付款2已付款
const payStatusStr = computed(() => {
    switch (props.payStatus) {
        case 1:
            return '未付款'
        case 2:
            return '已付款'
        default:
            break
    }
})
// 物流状态1待取货2配送中3已送达
const logisticsStatusStr = computed(() => {
    switch (props.logisticsStatus) {
        case 1:
            return '待取货'
        case 2:
            return '配送中'
        case 3:
            return '已送达'
        default:
            break
    }
})
const resultStatus = computed(() => {
    // 如果是没有付款，就显示未付款，如果已经付款了，那么要考虑物流状态和订单状态。
    // 这种写法并不优雅，主要是这个逻辑设计比较简化，只可以做demo类的东西
    if (props.payStatus === 1) {
        return '未付款'
    } else if (props.orderStatus === 1 && !props.logisticsStatus) {
        // 已经付款且订单状态是1，物流状态还没有，那就展示已下单
        return '已下单'
    } else if (props.orderStatus === 1 && props.logisticsStatus === 1) {
        return '待取货'
    } else if (props.orderStatus === 1 && props.logisticsStatus === 2) {
        return '配送中'
    } else if (props.orderStatus === 1 && props.logisticsStatus === 2) {
        return '已送达'
    } else if (props.orderStatus === 2) {
        return '已取消'
    } else if (props.orderStatus === 3) {
        return '已退货'
    }
})
const payOrder = () => {
    emits('pay', props.orderId)
}
const handleSelect = async (val: string) => {
    if (val === 'cancel') {
        emits('cancel', props.orderId)
        // await cancelOrder(props.orderId)
    } else if (val === 'back') {
        emits('back', props.orderId)
        // await backOrder(props.orderId)
    }
}
const handleComment = () => {
    emits('comment', props.orderId)
}
</script>

<style scoped></style>
